<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
var option = ref({
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    textStyle: {
      color: "#fff", // 修改图例文字的颜色为红色
    },
  },
  grid: {
    left: "10%",
    right: "10%",
    top: "10%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    splitLine: { show: false }, // 取消 x 轴网格线
  },
  yAxis: {
    type: "category",
    // data: [],
    data: ["上海", "天津", "重庆", "广东", "广西", "浙江", "江苏", "湖北"],

    axisLabel: {
      textStyle: {
        color: "#fff", // 修改 x 轴标题颜色为红色
      },
    },
  },
  // color: ['#25cc98', '#c68f36', '#17dfec'],
  series: [
    {
      name: "2024",
      type: "bar",
      // data: [],
      data: [32, 55, 73, 82, 56, 35, 42, 61],

      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#2fe7a4" }, // 渐变起始颜色
          { offset: 1, color: "#08696f" }, // 渐变结束颜色
        ]),
        borderRadius: 10,
      },
      rich: {
        value: {
          color: "#ffffff",
        },
      },
    },
    {
      name: "2025",
      type: "bar",
      // data: [],
      data: [46, 72, 56, 81, 27, 35, 49, 102],

      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#f6c434" }, // 渐变起始颜色
          { offset: 1, color: "#4e2a25" }, // 渐变结束颜色
        ]),
        borderRadius: 10,
      },
    },
    {
      name: "2026",
      type: "bar",
      // data: [],
      data: [55, 85, 76, 49, 46, 82, 52, 56],

      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#39f8fb" }, // 渐变起始颜色
          { offset: 1, color: "#05166d" }, // 渐变结束颜色
        ]),
        borderRadius: 10,
      },
    },
  ],
});
let warp = ref("");
let myChart
onMounted(() => {
  myChart = echarts.init(warp.value);
  option && myChart.setOption(option.value);
 
});
window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>
<template>
  <div ref="warp" style="width: 90%; height: 100%; margin-top: 20px"></div>
</template>

<style></style>